<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="menu">
        <title>Overview | Kendo UI Menu</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn how to initialize the Kendo UI Menu widget, configure its behaviors and customize animations.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("controls/navigation/menu/overview.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//controls/navigation/menu/overview.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="menu-overview"><a href="#menu-overview">Menu Overview</a></h1>

<p>The <a href="http://demos.telerik.com/kendo-ui/menu/index">Kendo UI Menu widget</a> displays hierarchical data as a multi-level menu. It provides rich styling for unordered lists of items, and can be used for both navigation and executing JavaScript commands. Items can be defined and initialized from HTML, or through the configuration options. <a href="/api/javascript/ui/menu">Kendo UI Menu API</a> can be used to add and remove items.</p>

<h2 id="getting-started"><a href="#getting-started">Getting Started</a></h2>

<h3 id="initialize-the-menu"><a href="#initialize-the-menu">Initialize the Menu</a></h3>

<p>The Kendo UI Menu widget can be initialized in two ways:</p>

<ul>
<li>Through HTML markup</li>
<li>Through a JSON data object</li>
</ul>

<blockquote>
<p><strong>Important</strong>  </p>

<p>As Menu should be initialized after the DOM is fully loaded, make sure you create it within a <code>$(document).ready()</code> statement.</p>
</blockquote>

<h4>Using HTML Markup</h4>

<p>The example below demonstrates how to initialize the Menu by using HTML markup.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Normal Item
        &lt;ul&gt;
            &lt;li&gt;&lt;span class="k-sprite icon-class"&gt;&lt;/span&gt;Item with a Sprite&lt;/li&gt;
            &lt;li&gt;&lt;img src="Icons/contacts.gif" /&gt;Item with an Icon&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="http://www.google.com"&gt;Navigation Item&lt;/a&gt;&lt;/li&gt;
    &lt;li class="k-state-active"&gt;Active Item&lt;/li&gt;
    &lt;li&gt;Template Item
        &lt;div class="k-group k-content"&gt;
            Test button - &lt;a class="k-button"&gt;Button&lt;/a&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
    $(document).ready(function() {
        $("#menu").kendoMenu();
    });
&lt;/script&gt;
</code></pre>

<h4>Using JSON Data Object</h4>

<p>The example below demonstrates how to initialize the Menu by using a JSON data object</p>

<p>By initializing the Menu using JSON, you can use assign a select handler for each item by assigning a function to the <code>select</code> property.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="menu"&gt;&lt;/ul&gt;

&lt;script&gt;
  $(document).ready(function() {
    $("#menu").kendoMenu({
      dataSource:
      [{
        text: "Item 1",
        cssClass: "myClass",                         // (Optional) Add custom CSS class to the item, added 2012 Q3 SP1
        url: "http://www.telerik.com"                // (Optional) Link URL if navigation is needed
      },
       {
         text: "&lt;b&gt;Item 2&lt;/b&gt;",
         encoded: false,                              // Allows the use of HTML for item text
         content: "text"                              // Content within an item
       },
       {
         text: "Item 3",
         imageUrl: "http://www.telerik.com/test.jpg", // (Optional) Item image URL
         items: [{                                    // Sub-item collection
                text: "Sub Item 1"
            },
            {
                text: "Sub Item 2"
            }]
       },
       {
         text: "Item 4",
         spriteCssClass: "imageClass3"                // (Optional) Item image sprite CSS class
       },
       {
         text: "Item 5",
         select: function(e) {                        // Item select event handler, optional
            // e.sender - returns reference to the Kendo Menu widget
            // e.target - returns the clicked element. Typically, the span.k-link element.

            // handle event
         }]
    })
  });
&lt;/script&gt;
</code></pre>

<h3 id="sample-case"><a href="#sample-case">Sample Case</a></h3>

<p>The example below demonstrates the basic approach to build a Menu by using HTML markup.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="MenuID"&gt;
    &lt;li&gt;root item 1&lt;/li&gt;
    &lt;liroot item 2
        &lt;ul&gt;
            &lt;li&gt;child item 1&lt;/li&gt;
            &lt;li&gt;child item 2&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;root item 3
        &lt;ul&gt;
            &lt;li&gt;
                &lt;div&gt;Menu template content&lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>To create a Kendo UI Menu based on the example above, elaborate on the DOM elements in the way demonstrated by the code below.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="MenuID" class="k-widget k-menu"&gt;
    &lt;li class="k-item k-state-default"&gt;&lt;span class="k-link"&gt;root item 1&lt;/span&gt;&lt;/li&gt;
    &lt;li class="k-item k-state-default"&gt;
        &lt;span class="k-link"&gt;root item 2
            &lt;span class="k-icon k-i-arrow-s"&gt;&lt;/span&gt;
        &lt;/span&gt;
        &lt;ul class="k-group k-menu-group"&gt;
            &lt;li class="k-item k-state-default"&gt;&lt;span class="k-link"&gt;child item 1&lt;/span&gt;&lt;/li&gt;
            &lt;li class="k-item k-state-default"&gt;&lt;span class="k-link"&gt;child item 2&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="k-item k-state-default"&gt;
        &lt;span class="k-link"&gt;root item 3
            &lt;span class="k-icon k-i-arrow-s"&gt;&lt;/span&gt;
        &lt;/span&gt;
        &lt;ul class="k-group k-menu-group"&gt;
            &lt;li class="k-item k-state-default"&gt;
                &lt;div&gt;Menu template content&lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The basic emphasis is on the following changes:</p>

<ul>
<li>All <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> elements receive some of the Kendo UI CSS classes.</li>
<li>Each menu item text is wrapped in a <code>span.k-link</code> element, or <code>a.k-link</code> element, if a navigation URL is specified.</li>
<li>A dropdown arrow (<code>&lt;span class="k-icon k-i-arrow-s"&gt;&lt;/span&gt;</code>) is appended to the <code>.k-link</code> element of each expandable menu item.</li>
</ul>

<p>Once a menu group is opened, the <code>ul.k-group</code> element is wrapped by a <code>div.k-animation-container</code> and the DOM structure is transformed in the way demonstrated below.</p>

<h6>Example</h6>

<pre><code>&lt;li class="k-item k-state-default"&gt;
    &lt;span class="k-link"&gt;root item 2
        &lt;span class="k-icon k-i-arrow-s"&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;div class="k-animation-container"&gt;
        &lt;ul class="k-group k-menu-group"&gt;
            &lt;li class="k-item k-state-default"&gt;&lt;span class="k-link"&gt;child item 1&lt;/span&gt;&lt;/li&gt;
            &lt;li class="k-item k-state-default"&gt;&lt;span class="k-link"&gt;child item 2&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/li&gt;
</code></pre>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-Menu"><a href="#configuration-Menu">Menu Animations</a></h3>

<p>By default, the Menu uses a slide animation to expand sub-items on a mouse hover event. Animations, along with the animation style and delay, can be customized by using configuration properties. You can also configure Menu items to open on click instead of on hover.</p>

<p>The example below demonstrates how to change Menu animation and open behavior.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="menu"&gt;&lt;/ul&gt;

&lt;script&gt;
    $("#menu").kendoMenu({
        animation: {
            open: { effects: "fadeIn" },
            duration: 500
        },
        openOnClick: true
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-Dynamic"><a href="#configuration-Dynamic">Dynamic Items</a></h3>

<p><a href="/api/javascript/ui/menu">The Kendo UI Menu API</a> provides methods for dynamically adding or removing Menu items.</p>

<p>To add items, provide the new item as a JSON object along with a reference item. A reference item is a target Menu item HTML element that already exists in the Menu. The reference item will be used to determine the placement in the hierarchy of the new item. Any valid jQuery selector can be used to obtain a reference to the target item.</p>

<p>For more information on configuring Menu items, see the <a href="http://demos.telerik.com/kendo-ui/web/menu/api.html">Menu API demos</a>.</p>

<p>The example below demonstrates how to add a new root Menu item.</p>

<h6>Example</h6>

<pre><code>&lt;ul id="menu"&gt;&lt;/ul&gt;

&lt;script&gt;
    var menu = $("#menu").kendoMenu().data("kendoMenu");
    menu.insertAfter(
        { text: "New Menu Item" },
        menu.element.children("li:last")
    );
&lt;/script&gt;
</code></pre>

<h2 id="display"><a href="#display">Display</a></h2>

<h3 id="shrink-menu-to-exactly-fit-root-items"><a href="#shrink-menu-to-exactly-fit-root-items">Shrink Menu to Exactly Fit Root Items</a></h3>

<p>The Menu renders as a <code>&lt;ul&gt;</code> element and expands horizontally by default. If a horizontal Menu is wider than the total width of its root items, a blank space will remain visible on the right. To remove this space, use the CSS rules in the example below.</p>

<h6>Example</h6>

<pre><code>#menu-id /* for a specific menu instance */
,
.k-menu-horizontal /* for all horizontal menus */
{
   display: inline-block;
}
</code></pre>

<p>In left-to-right layouts, shrinking the horizontal Menu will make the border of the last root item touch the right border of the Menu. The last item border can be removed as shown int he example below.</p>

<h6>Example</h6>

<pre><code>#menu-id &gt; .k-last /* for a specific menu instance */
,
.k-menu-horizontal &gt; .k-last /* for all horizontal menus */
{
   border-width: 0;
}
</code></pre>

<!--*-->

<h2 id="keyboard-navigation"><a href="#keyboard-navigation">Keyboard Navigation</a></h2>

<p>The Menu provides a keyboard navigation functionality. When on focus, the first root item is activated.</p>

<p>Kendo UI Menu supports the following keyboard shortcuts and user actions:</p>

<table>
<thead>
<tr>
<th align="left">SHORTCUT</th>
<th align="left">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Left <code>Arrow</code> key</td>
<td align="left"><ul>
<li>Moves the active item on the root level of horizontal Menus to the left</li> <li>Closes an item group</li>
</ul></td>
</tr>
<tr>
<td align="left">Right <code>Arrow</code> key</td>
<td align="left"><ul>
<li>Moves the active item on the root level of horizontal Menus to the right</li> <li>opens an item group of a vertical Menu</li> <li>Moves the active state to the next root item of a horizontal Menu, if the previous active item has been inside an item group</li>
</ul></td>
</tr>
<tr>
<td align="left">Up <code>Arrow</code> key</td>
<td align="left">Moves the active item of vertical Menu item groups upwards</td>
</tr>
<tr>
<td align="left">Down <code>Arrow</code> key</td>
<td align="left"><ul>
<li>Moves the active item of vertical Menu item groups downwards</li> <li>Opens an item group of a horizontal Menu</li>
</ul></td>
</tr>
<tr>
<td align="left"><code>Esc</code></td>
<td align="left">Closes an item group</td>
</tr>
<tr>
<td align="left">(<code>Shift</code>+) <code>Tab</code>
</td>
<td align="left">Blurs the Menu and moves the focus to the next (previous) focusable page element</td>
</tr>
</tbody>
</table>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<ul>
<li><a href="/controls/navigation/menu/contextmenu">Context Menu</a></li>
<li><a href="/controls/navigation/menu/how-to/creating-split-button">How to Create Split Button</a></li>
<li><a href="/controls/navigation/menu/how-to/execute-custom-action-on-click-based-on-class-name">How to Execute Custom Click Actions Based on Class Name</a></li>
<li><a href="/controls/navigation/menu/how-to/using-fontawesome-icons">How to Use FontAwesome Icons</a></li>
<li><a href="/aspnet-mvc/helpers/menu/overview">Overview of the ASP.NET MVC HtmlHelper Extension for the Menu Widget</a></li>
<li><a href="/jsp/tags/menu/overview">Overview of the Menu JSP Tag</a></li>
<li><a href="/php/widgets/menu/overview">Overview of the Menu PHP Class</a></li>
<li><a href="/api/javascript/ui/menu">Menu JavaScript API Reference</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

